<template>
  <div id="docOrderDetails">
    <header>
      <i @click="goBack()"></i>
      <div>使用时间</div>
    </header>
    <div class="timeBox">
      <ul>
        <li class="chair">
          <img src="../../../image/end.png" alt="">
          椅子编号:{{name}}
        </li>
        <li>
          <span style="color:#a3a3a3"><img src="../../../image/start.png" alt="">开始时间</span>
          <span style="color:#a3a3a3"><img src="../../../image/start.png" alt="">结束时间</span>
        </li>
        <li v-for="item in list">
          <span>{{item.starttime}}</span>
          <span>{{item.endtime}}</span>
        </li>
        <li>
          <div style="color:#a3a3a3;padding-left: 16px" v-show="hour!=''">
            <img src="../../../image/start.png" alt="">
            累计时长
          </div>
          <div v-for="item in hour" style="display: flex;
          align-items: center;">
            <i style="color:#8d8d8d;padding:0px 20px;font-size: 9px;  ">
              {{item.hour}}:00-{{item.hour+1}}:00</i>
            <img src="../../../image/line.png" alt="">
            <i style="color:#8d8d8d;padding-left: 20px;
              font-size: 9px;">
              {{item.timeSpan}}分钟
            </i>
          </div>
          <div>
            <span></span>
            <span style="color:#8d8d8d;height: 47px;">
              <img src="../../../image/star.png" alt="">
              共计价格:{{allPrice}}元</span>
          </div>
        </li>

        <li @click=getAlltime()>查看所用时间</li>
      </ul>

    </div>
  </div>
</template>
<script>
  import {
    MessageBox
  } from 'mint-ui';
  export default {
    data() {
      return {
        numbering: '', //椅子编号
        time: '', //总时间
        id: '', //订单id
        type: '',
        name: '',
        list: [],
        arr: [], //存取所有开始结束时间 ,所有的时间段
        hour: [],
        timeSpan: '',
        objArr: [],
        timeSpan: 0,
        per_price: [], //所有时间段对应的价格
        allPrice: 0, //总价格
      }
    },

    methods: {
      //返回上一级
      goBack() {
        this.$router.back();
      },
      //获取医生的使用时间
      init() {
        this.name = this.$route.query.chairname;
        this.$api.get(this.$api.baseURLSchool, "/no_page/view_chairs_timing_chairs_doctor_order?order_num=" + this.$route
          .query.orderId, {},
          r => {
            if (r.data.ret == 1) {
              this.numbering = r.data.info[0].ssid;
              this.list = r.data.info;
              this.per_price = r.data.info[0].per_price;
              this.per_price = this.per_price.substring(1, this.per_price.length - 1)
              this.per_price = this.per_price.split(',')

            }
          }, err => {
            console.log(err);
          })
      },
      getAlltime() {
        if(this.list[this.list.length-1].endtime==null){
            this.$utils._toast('请完整结束手术,才可以查看所用时间');
            return;
        }
        if (this.allPrice != 0) {
          return;
        }
        for (var i = 0; i < this.list.length; i++) {
          var timeObj = {
            start: this.list[i].starttime.substring(11),
            end: this.list[i].endtime.substring(11)
          }
          this.arr.push(timeObj)
        }
        var objArr = [];
        //获取开始与结束时的小时点
        for (var i = 0; i < this.arr.length; i++) {
          objArr.push(this.gettime(this.arr[i].start, this.arr[i].end))
        }

        var first = Number(objArr[0].sH),
          last = Number(objArr[objArr.length - 1].eH); //首时间与末尾时间
        var startIndex = 0; // 标识时间点查询数组的起始位置
        for (var j = first; j < last + 1; j++) {
          //当前时间点
          var hour = j;
          // 时间点 经历的时间段
          var timeSpan = 0;
          var price = 0; //费用
          var k = startIndex;
          // this.gettime(this.arr[k].start, this.arr[k].end)
          var obj1 = this.gettime(this.arr[k].start, this.arr[k].end);
          //     // 如果区间的末尾是当前时间点，则一直遍历相加分钟
          while (k < j && hour == obj1.eH) {
            if (hour > obj1.sH) {
              timeSpan += obj1.eM;
              for (var p = 0; p < this.per_price.length; p++) {
                if (JSON.parse("{" + this.per_price[p] + "}")[hour] == undefined) {

                } else {
                  var price = JSON.parse("{" + this.per_price[p] + "}")[hour];
                }
              }
              console.log('price111', price)
              price = Math.round((timeSpan / 60) * price)
            } else {
              timeSpan += obj1.eM - obj1.sM;
              for (var p = 0; p < this.per_price.length; p++) {
                if (JSON.parse("{" + this.per_price[p] + "}")[hour] == undefined) {

                } else {
                  var price = JSON.parse("{" + this.per_price[p] + "}")[hour];
                }
              }
              price = (Math.round((timeSpan / 60) * price))
              console.log('price112', price)
            }
            k++;
            if (this.arr[k] == undefined) {
              obj1 = {};
            } else {
              obj1 = this.gettime(this.arr[k].start, this.arr[k].end);
            }
          }
          startIndex = k;
          if (hour == obj1.sH) {
            timeSpan += 60 - obj1.sM;
            for (var p = 0; p < this.per_price.length; p++) {
              if (JSON.parse("{" + this.per_price[p] + "}")[hour] == undefined) {

              } else {
                var price = JSON.parse("{" + this.per_price[p] + "}")[hour];
              }
            }
            price = (Math.round((timeSpan / 60) * price))
            console.log('price113', price)
          }
          if (hour > obj1.sH && hour < obj1.eH) {
            timeSpan += 60;
            for (var p = 0; p < this.per_price.length; p++) {
              if (JSON.parse("{" + this.per_price[p] + "}")[hour] == undefined) {

              } else {
                var price = JSON.parse("{" + this.per_price[p] + "}")[hour];
              }
            }
            price = (Math.round((timeSpan / 60) * price))
            console.log('price114', price)

          }
          console.log(hour,timeSpan)
          this.hour.push({
            'hour': hour,
            'timeSpan': timeSpan
          })
          this.allPrice = price;
        }
      },

      gettime(startTime, endTime, price) {
        var start = (startTime).split(":");
        var end = (endTime).split(":");
        var sH = start[0] //开始的小时
        var eH = end[0] //结束的小时
        var sM = start[1] //结束的小时
        var eM = end[1] //结束的小时
        var price = price //结束的小时
        return {
          sH: Number(sH),
          eH: Number(eH),
          sM: Number(sM),
          eM: Number(eM)
        }
      },
    },
    created() {
      this.init();



    }
  }

</script>
<style lang="scss" scoped>
  .order_num {
    width: 2.8rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .timeBox {
    /* width: 351px;
    min-height: 154px;
    margin:0 auto;
    background: url('../../../image/bac.png') no-repeat center;
    background-size:100%; */
  }

  .timeBox>ul {
    padding: 0px !important;
    width: 351px;
    min-height: 154px;
    margin: 20px auto;
    background: #fff;
    border-radius: 10px;
    position: relative;
  }

  .chair {
    height: 40px;
    line-height: 40px !important;
    color: #fff;
    padding-left: 16px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #57ce9f;
  }

  .timeBox ul li {
    line-height: 34px;
    border-bottom: 1px solid #f7f7f7;
    /* display: flex; */
    /* justify-content: space-between; */
    width: 100%;
  }

  .timeBox ul li:nth-last-child(2) {
    min-height: 47px;
  }

  .timeBox ul li:nth-last-child(1) {
    background: linear-gradient(to bottom, #55dea8, #4fe6bf);
    color: #fff;
    height: 0.35rem;
    line-height: 0.35rem;
    width: 1.3rem;
    text-align: center;
    border-radius: 0.25rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }

  .timeBox ul li span {
    display: inline-block;
    width: 49%;
    text-align: center;
    color: #25b859;
  }

</style>
